<template>
	<view>
		<view class="goods-list">
			<view class="list-view" v-for="(item,index) in goodsList" @click="goDetail(item.id)" :key="index">
				<view class="pictrue-box">
					<image mode="widthFix" class="pictrue" :src="item.imglogo"></image>
				</view>
				
				<view class="msg-box">
					<view class="tag one-omit">
						{{item.title}}
					</view>
					<view class="price-info flex-box">
						<view class="info-text" v-if="item.reorder==1">
							复购价
						</view>
						<view class="user-price">
							<text class="min">￥</text>
							<text class="max">{{item.price || 0}}</text>
						</view>
					</view>
					<view class="sell-num">
						已售出{{item.stock}}件
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"goods-item",
		data() {
			return {
				
			};
		},
		props:{
			goodsList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		methods:{
			goDetail(id){
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
.goods-list {
		border-radius: 20rpx;
		background: #fff;
		padding:20rpx;
		overflow: hidden;
		.list-view {
			float: left;
			width: 49%;
			background-color: #F7F7F7;
			border-radius: 20rpx;
			margin-right: 2%;
			margin-bottom: 20rpx;
			overflow: hidden;
			&:nth-child(2n) {
				margin-right: 0;
			}
		}
		.sell-num{
			font-size:22rpx;
			color:#353535;
		}
		.price-info {
			margin: 20rpx auto 10rpx;
			justify-content: flex-start;
			align-items: flex-end;
			.info-text{
				display: inline-block;
				color:#BB7822;
				font-size:22rpx;
				background-color: #F4E1B7;
				border-radius: 5rpx;
				margin-right:6rpx;
				padding:2rpx 10rpx;
				word-break: keep-all;
			}
			.user-price {
				font-weight: bold;
				color: $price-clor;
		
				.min {
					font-size: 22rpx;
				}
		
				.max {
					font-size: 32rpx;
				}
			}
		}
	}
	.pictrue-box{
		width: 100%;
		height:320rpx ;
		border-radius:20rpx 20rpx 0 0;
		overflow: hidden;
	}
	.pictrue {
		width: 100%;
		display: block;
		border-radius: 20rpx 20rpx 0 0;
	}
	.msg-box{
		width: 100%;
		display: block;
		padding:20rpx ;
		.tag {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;
			font-size: 26rpx;
			line-height: 40rpx;
		}
	} 
</style>